<template>
	<view>
		<up-navbar title="爱学习" @leftClick="leftClick" :autoBack="true" style="background-color: rgba(0, 0, 0, 0);">
		</up-navbar>
	</view>
	<view class="top-box">
		<view class="top-box-children" style="background-image:url('/static/1.png'); background-size: cover">
			发布作业
		</view>
		<view class="top-box-children" style="background-image:url('/static/2.png'); background-size: cover">
			AI检查
		</view>
		<view class="top-box-children" style="background-image:url('/static/3.png'); background-size: cover">
			周末逆袭
		</view>
		<view class="top-box-children" style="background-image:url('/static/4.png'); background-size: cover">
			微进步
		</view>
		<view class="top-box-children" style="background-image:url('/static/5.png'); background-size: cover">
			兑换奖励
		</view>
	</view>
	<view class="bottom-box">
		<view class="bottom-box-top" style="background-image: url('/static/作业列表.png');background-size: cover;">
			<span style="margin-left: 10%;">{{ text }}</span>
		</view>
		<view style="margin-top: 5px;">
			<span style="margin-left: 75%;color: blue;">作业调整</span>
		</view>
		<view v-for="i in renwuList" class="renwubox">
			<view style="display: flex;justify-content: space-between;padding-bottom: 10px;">
				<span style="font-size: larger;margin-left: 30px;font-weight: bolder;">{{ i.name }}</span>
				<up-tag text="标签" type="warning" style="margin-right: 20px;">{{ i.statu }}</up-tag>
			</view>
			<hr>
			<view v-for="j in i.childrenList" style="margin-left: 50px;font-size: smaller;">
				<span style="height: 30px;line-height: 30px;font-weight: bold;">{{ j.id }}、{{ j.name }}</span>
			</view>
			<view style="padding-bottom: 5px;">
				<up-button type="primary" text="去完成"
					style="width: 100px;height: 40px;margin-left: 60%;margin-top: 5px;"
					@click="goHomeWork"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const text = ref('记得在每天19:15分来提交任务哦~')
	const renwuList = ref([{
			id: 1,
			name: '数学',
			statu: '待完成',
			childrenList: [{
					id: 1,
					name: '算术题'
				},
				{
					id: 2,
					name: '方程题'
				}
			]
		},
		{
			id: 1,
			name: '英语',
			statu: '待完成',
			childrenList: [{
					id: 1,
					name: '英语作文'
				},
				{
					id: 2,
					name: '完形填空'
				}
			]
		},
	])
	const leftClick = () => {  
	    console.log('leftClick');  
	};  
	const goHomeWork = () => {
		uni.navigateTo({
		    url: '/pages/Components/HomeWork/HomeWork'
		});
	}
</script>


<style>
	.top-box {
		width: 90%;
		margin-top: 100px;
		margin-left: 5%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.top-box-children {
		line-height: 40px;
		text-align: center;
		width: 16%;
		height: 70px;
		border-radius: 10px;
		font-size: small;
		font-weight: bolder;
		color: white;
	}

	.bottom-box {
		width: 90%;
		margin-top: 20px;
		border-radius: 15px 15px 0 0;
		height: 400px;
		margin-left: 5%;
	}

	.bottom-box-top {
		border-radius: 15px 15px 0 0;
		padding-left: 10px;
	}

	.bottom-box-top span {
		line-height: 40px;

		height: 40px;
	}

	.renwubox {
		width: 90%;
		margin-left: 5%;
		border-radius: 10px;
		background-color: #fdd9ff;
		margin-top: 20px;
		padding-top: 10px;
	}
</style>